<template>
<div class="video-page pages">
  <Top></Top>
  <Nav></Nav>
  <div class="video-content">
   <div class="video-item">
     <video :src="info.video_url" controls class="viedo"></video>
   </div>
    <div class="video-name">{{info.name}}</div>
    <div class="text" v-html="info.content" style="text-indent: 2em" v-if="info.content"></div>
  </div>
</div>
</template>

<script>
import Top from '@/components/Top.vue'
import Nav from '@/components/Nav.vue'
import Bottom from '@/components/Bottom.vue'
import BackHome from '@/components/BackHome.vue'
import {getVideoDetailApi} from "@/api/video";
export default {
    name: "detail",
  components:{
    Top,
    Nav,
    Bottom,
    BackHome
  },
    data(){
      return{
        formLoading:false,
        info:{
          video_url:'',
          content:'',
          name:''
        }
      }
    },
    methods:{
      getDetail() {
        this.formLoading = true
        getVideoDetailApi(this.id).then((res) => {
          this.info = res.result[0];
          console.log(this.info)
        }).finally(()=>{
          this.formLoading = false
        })
      },
    },
    mounted() {
      this.utils.createParams(this,this.$route.query);
      this.getDetail()
    }
  }
</script>

<style scoped lang="scss">
.video-page{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
.video-content{
  width: 900px;
  padding: 25px;
  min-height: 800px;
  .video-item{
    width: 100%;
    display: flex;
    justify-content: center;
    .viedo{
      width: 900px;
    }
  }
  .video-name{
    font-size: 22px;
    margin-top: 10px;
    font-weight: bold;
  }
  .text{
    margin-top: 15px;
  }
}
}
</style>
